<template>
  <div class="playListRecom">
    <div class="wrapper-left">
      <div class="back-blur">
        <!-- <div class="mask"></div> -->
        <ImgLazy :url="require(`@/assets/images/home/back_blur.jpg`)" />
      </div>
      <div class="item">
        <span class="span-i">专属推荐歌单</span>
        <a href="JavaScript:;">
          <div class="mask-nologin"></div>
          <ImgLazy :url="require(`@/assets/images/home/back_blur.jpg`)" />
        </a>
      </div>
      <div class="title">开启你的专属歌单</div>
    </div>
    <div class="wrapper-items">
      <div class="item-contain" v-for="(item, index) of data" :key="index">
        <Item :data="item"></Item>
      </div>
    </div>
  </div>
</template>

<script>
import Item from "./items";
// import ListData from "@/data/home/songlist.js"
export default {
  name: "PlayListRecom",
  components: {
    Item,
  },
  props: {
    data: {
      type: Array,
      default: [],
    },
  },
  setup() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
.playListRecom {
  width: 100%;
  height: 100%;
  position: relative;

  .wrapper-left {
    position: absolute;
    left: 0;
    top: 0;
    width: 20.5%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;

    &::after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      padding-bottom: 161.61972%;
    }
    .back-blur {
      width: 100%;
      height: 100%;
      .mask {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: url("../../../assets/images/home/gd_b_data.png") no-repeat;
        background-size: 100% auto;
        z-index: 1;
      }

      img {
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 0;
        filter: blur(2rem);
      }
    }
    .item {
      width: 82%;
      position: absolute;
      top: 23%;
      left: 8.23%;
      z-index: 1;

      &::after {
        content: "";
        display: block;
        width: 100%;
        padding-bottom: 100%;
      }

      .span-i {
        display: block;
        position: absolute;
        width: 147px;
        height: 32px;
        text-align: center;
        line-height: 32px;
        font-size: 16px;
        color: #fff;
        background-color: #fe5987;
        top: -17px;
        left: 0;
        z-index: 1;
        border-radius: 4px 0 10px 4px;

        &::before {
          content: "";
          width: 0;
          height: 0;
          border-color: transparent transparent #c31043 #c31043;
          border-width: 9px 6px 8px 7px;
          border-style: solid;
          position: absolute;
          top: 0;
          left: 147px;
        }
      }

      a {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border-radius: 8px;
        overflow: hidden;

        .mask-nologin {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          background: url("../../../assets/images/home/mask-n-login.png")
            no-repeat;
          background-size: 100% 100%;
        }

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .title {
      width: 82%;
      position: absolute;
      top: 79%;
      left: 8.23%;
      z-index: 1;
      text-align: center;
      color: #fff;

      &::after {
        content: "";
        width: 0;
        height: 0;
        padding-bottom: 100%;
      }
    }
  }

  .wrapper-items {
    margin: 0px -16px !important;
    margin-left: 22% !important;
    text-align: center;

    .item-contain {
      width: 20%;
      float: left;
    }
  }
}
</style>